﻿/* S= CSS Reset
----------------------------------------------- */
body, div, table, caption, tbody, tfoot, thead, tr, th, td, ul, li, p, h1 {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
body {
	font-size: 30px;
	font-family: SimHei, sans-serif;
	line-height: 100%;
}
ul, ol {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
img[src=""], img:not([src]){
  opacity: 0;
}
/* E= CSS Reset */

/* S= Global
----------------------------------------------- */
body, .wrapper, .pagebg {
	width: 1920px;
	height: 1080px;
	overflow: hidden;
}
body {
	color: #f5f5f5;
	position: relative;
}
.wrapper, .pagebg {
	left: 0;
	position: absolute;
	top: 0;
}
.pagebg img {
	display: block; /* clear some space 对于html5中背景图比原高度多出3PX的问题*/
}
.item, .link, .txt-wrap, .txt, .btn, .icon, .pic, .pic-shade, .cover, .num {
	position: absolute;
}
.txtHidden {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.w-contentCover {
	/*background: url(../images/w-cover.png) no-repeat;*/
	background-color: rgba(0, 0, 0, 0.6);
}
.w-contentCover02 {
	background-color: rgba(0, 0, 0, 0.7);
}
.scrollBox {
	left: 0;
	position: absolute;
	top: 0;
}
/* E= Global */

/* S= common ----------------------------------------------- */
.item {
	z-index: 1;
}
.item_focus {
	z-index: 2;
}
.item .pic {
	z-index: 3;
}
.item .icon {
	z-index: 5;
}
.item .txt-wrap {
	z-index: 4;
}
.item .link {
	z-index: 2;
}

.item .txt {
	z-index: 4;
}
.logo {
	position: absolute;
	left: 100px;
	top: 45px;
}
.time {
	position: absolute;
	left: 1730px;
	top: 39px;
	color: rgba(255, 255, 255, 0.6);
	font-size: 36px;
	line-height: 50px;
	width: 60px;
	height: 50px;
}
.date {
	position: absolute;
	left: 1767px;
	top: 23px;
	color: rgba(250, 245, 246, 0.6);
	font-size: 22px;
	-webkit-text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	line-height: 26px;
	width: 140px;
	height: 52px;
}
.w-notice {
	position: absolute;
	left: 1024px;
	top: 39px;
	background: rgba(255, 255, 255, 0.2);
	-webkit-border-radius: 25px;
	border-radius: 25px;
	width: 376px;
	height: 50px;
}
.w-notice .icon {
	left: 22px;
	top: 9px;
}
.w-notice .txt {
	left: 67px;
	color: #dbdbdb;
	font-size: 28px;
	line-height: 50px;
	width: 300px;
	height: 50px;
	overflow:hidden;
}
.w-headBtn {
	position: absolute;
	left: 1270px;
	top: 39px;
}
.w-headBtn .item {
	background: rgba(255, 255, 255, 0.2);
	-webkit-border-radius: 25px;
	border-radius: 25px;
	width: 130px;
	height: 50px;
}
.w-headBtn .item .txt {
	left: 57px;
	color: #dbdbdb;
	font-size: 28px;
	line-height: 50px;
	width: 60px;
	height: 50px;
}
.w-headBtn .item .icon {
	left: 18px;
	top: 11px;
}
.w-headBtn02 {
	position: absolute;
	left: 1063px;
	top: 39px;
}
.w-headBtn02 .item {
	background: rgba(255, 255, 255, 0.2);
	-webkit-border-radius: 25px;
	border-radius: 25px;
	width: 187px;
	height: 50px;
}
.w-headBtn02 .item .txt {
	left: 57px;
	color: #dbdbdb;
	font-size: 28px;
	line-height: 50px;
	width: 117px;
	height: 50px;
}
.w-headBtn02 .item .icon {
	left: 18px;
	top: 11px;
}
.w-bottomBtn {
	position: absolute;
	left: 700px;
	top: 3400px;
	width:500px;
	height:150px;
	padding:60px 0 0 60px;
	overflow:hidden;
	z-index:6;
}
.w-bottomBtn .item {
	background: rgba(255, 255, 255, 0.2);
	-webkit-border-radius: 25px;
	border-radius: 25px;
	width: 185px;
	height: 50px;
}
.w-bottomBtn .item .txt {
	left: 57px;
	color: #dbdbdb;
	font-size: 28px;
	line-height: 50px;
	width: 120px;
	height: 50px;
}
.w-bottomBtn .item .icon {
	left: 22px;
	top: 9px;
}
.w-headBtn .item_focus,
.w-headBtn02 .item_focus,
.w-bottomBtn .item_focus {
	background: linear-gradient(to left, #fdac11, #fc142e);
}
.w-headBtn .item_focus .txt,
.w-headBtn02 .item_focus .txt,
.w-bottomBtn .item_focus .txt  {
	color:#f6f6f6;
}
.w-headBtn .item_focus.ui-breathLight-element::before,
.w-headBtn02 .item_focus.ui-breathLight-element::before,
.w-bottomBtn .item_focus.ui-breathLight-element::before {
	content: '';
	position: absolute;
	left: -4px;
	top: -4px;
	-webkit-border-radius: 29px;
	border-radius: 29px;
}
.w-menu {
	position: absolute;
	left: 81px;
	top: 134px;
	z-index:3;
}
.w-menu .item .txt-wrap {
	height: 64px;
	/*transition: all 150ms linear 0s;*/
}
.w-menu .item .txt {
	color: #aaadb2;
	font-size: 42px;
	text-align: center;
	letter-spacing: 5px;
	line-height: 64px;
	height: 64px;
	/*transform-style: preserve-3d;
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out;*/
}
.w-menu .item .txt-wrap01,
.w-menu .item .txt-wrap01 .txt {
	width: 128px;
}
.w-menu .item .txt-wrap02,
.w-menu .item .txt-wrap02 .txt {
	width: 164px;
}
.w-menu .item .txt-wrap:after {
	/*-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border: 1px solid rgba(255, 255, 255, 0);*/
	height: 64px;
	content: " ";
	display: block;
	margin: 0 auto;
	position: relative;
	/*-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;*/
	width: 100%;
	top:0;
}
.w-menu .item:hover .txt-wrap:after,
.w-menu .item_focus .txt-wrap:after {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	background: linear-gradient(to left, #fdac11, #fc142e);
	-webkit-border-radius: 32px;
	border-radius: 32px;
	/*-webkit-transition: width 0.25s ease-in-out;
	transition: width 0.25s ease-in-out;*/
	width: 100%;
}
.w-menu .item:hover .txt-wrap:after,
.w-menu .item_focus .txt-wrap:after {
	bottom: auto;
	top: 0;
	width: 100%;
}
.w-menu .item_focus .txt-wrap {
	/*-webkit-border-radius: 32px;
	border-radius: 32px;
	letter-spacing: 5px;
	transition: all 150ms linear 0s;*/
}
.w-menu .item:hover .txt-wrap .txt ,
.w-menu .item_focus .txt-wrap .txt {
	color: #fbf9f9;
	font-weight:bold;
	font-size:46px;
	/*transition: all 150ms linear 0s;
	transform: rotateY(0deg);*/
}
.w-menu .item_select .link {
	position: absolute;
	left: 49px;
	top: 66px;
	background-color:#fc3629;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	width: 30px;
	height: 6px;
}
.w-menu .item_select .txt {
	color: #fc3629;
	font-size:44px;
}
.w-headwrap {
	position:absolute;
	left:0;
	top:0;
	z-index:3;
}
.w-head-cover {
	position:absolute;
	left:0;
	top:0;
	background: url(../images/w-head-cover.png) no-repeat;
	width: 1920px;
	height: 222px;
	z-index:2;
}
.w-indexContent {
	position: absolute;
	left: 0;
  top: 180px;
	height: 1080px;
	width: 1920px;
	overflow: hidden;
	z-index:1;
}
.w-indexContent .scrollBox {
	margin-top:70px;
	will-change: opacity;
}
.w-indexContent .title {
	position: absolute;
	left: 100px;
	top: 689px;
	color: #f5f5f5;
	font-size: 44px;
	line-height: 50px;
	width: 800px;
	height: 50px;
	overflow: hidden;
}
.w-listAll {
	position: absolute;
}
.w-listAll .item {
	/* animation: focusZoomOut 0.4s both; */
    /* animation-iteration-count: 1; */
    /* animation-fill-mode: both; */
    will-change: transform;
}
.w-listAll .txt-wrap {
	bottom:0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
}
.w-listAll .item .txt {
	left: 20px;
	-webkit-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	line-height: 40px;
	height: 40px;
	overflow: hidden;
}
.w-listAll .item .play {
	display:none;
	position:absolute;
	right:10px;
	bottom:-45px;
	z-index:6;
}
.w-listAll .item .txt-wrap-style02 {
	background:none;
	width: 407px;
	height: 50px;
}
.w-listAll .item .txt-wrap-style02 .play {
	bottom:40px;
}
.icon-free {
	background: url(../images/w-icon-free.png) no-repeat;
	width: 73px;
	height: 73px;
	-webkit-border-radius: 8px 0 0 0;
	border-radius: 8px 0 0 0;
}
.w-listAll .item .icon-free {
	left:0;
	top:0;
}
.w-listAll .item,
.w-listAll .item .pic,
.w-listAll .item .pic img,
.w-listAll .item .txt-wrap,
.w-listAll .item_focus,
.w-listAll .item_focus .pic,
.w-listAll .item_focus .pic img,
.w-listAll .item_focus .txt-wrap {
	-webkit-border-radius: 8px;
	border-radius: 8px;
}
/*.w-listAll .item_focus {
	margin:-5px 0 0 -5px;
	-webkit-transform: scale(1.07);
	transform:  scale(1.07);
	border: solid 5px #ffffff;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: 8px 8px 68px rgba(0, 85, 255, 0.88), 0 0 39px rgba(5, 229, 255, 0.8);
	box-shadow: 8px 8px 68px rgba(0, 85, 255, 0.88), 0 0 39px rgba(5, 229, 255, 0.8);
}*/
.w-listAll .item_focus {
	border: solid 4px #000000;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	-webkit-transform: scale(1.08);
	transform:  scale(1.08);
	transform: scale3d(1.08, 1.08, 1);
    animation: focusZoomIn 0.4s both;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    will-change: transform;
}
 @keyframes focusZoomIn {
  0% {
    transform: perspective(15rem) translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  50% {
    transform: perspective(15rem) translate3d(0, 0, 1.07rem);
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  100% {
    transform: perspective(15rem) translate3d(0, 0, 1rem);
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
}
@keyframes focusZoomOut {
  0% {
    transform: perspective(15rem) translate3d(0, 0, 1rem);
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  50% {
    transform: perspective(15rem) translate3d(0, 0, -0.2rem);
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
  100% {
    transform: perspective(15rem) translate3d(0, 0, 0);
    transition-timing-function: cubic-bezier(0.33, 0, 0.67, 1);
  }
}
.w-listAll .item_focus .play {
	display:block;
	background: url(../images/w-play.png) no-repeat;
	width: 76px;
	height: 76px;
	-webkit-animation: 1s ease;
	animation: 1s ease;
	-webkit-animation-name: bounce;
	animation-name: bounce;
}
@-webkit-keyframes bounce {
0%,20%,50%,80%,100%{-webkit-transform:translateY(0);}
    40%{-webkit-transform:translateY(-30px);}
    60%{-webkit-transform:translateY(-15px);}
}
@keyframes bounce {
 0%,20%,50%,80%,100%{transform:translateY(0);}
    40%{transform:translateY(-30px);}
    60%{transform:translateY(-15px);}
}
.w-listAll .item_focus .txt-wrap-style02 {
	/*left:20px;*/
	bottom:-36px;
	background-color:#fff;
	-webkit-border-radius: 0;
	border-radius: 0;
	margin:0 20px;
	height: 72px;
}
.w-listAll .item_focus .txt-wrap-style02 .txt {
	color:#1f1f1f;
	top:16px;
}
.score,
.episode,
.small-title {
	position:absolute;
	left:30px;
	bottom:95px;
	background: rgba(0, 0, 0, 0.6);
	font:100 22px/40px Microsoft YaHei;
	text-align:center;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	height: 40px;
	z-index: 5;
}
.score {
	color: #ff4227;
	width: 67px;
}
.episode {
	width: 120px;
	color:#dedede;
}
.small-title {
	color: #dedede;
	padding:0 18px;
	width: auto;
}
/* E= common */

/* S= animate */
	/* 呼吸灯 */
.ui-breathLight-element::before {
	content: '';
	position: absolute;
	left: -8px;
	top: -8px;
	border: solid 4px #ffffff;
	-webkit-border-radius: 16px;
	border-radius: 16px;
	/*-webkit-box-shadow: 0 0 50px rgba(252, 147, 35, 1);
	box-shadow: 0 0 50px rgba(252, 147, 35, 1);
	-webkit-box-shadow: 8px 8px 68px rgba(0, 85, 255, 0.88), 0 0 39px rgba(5, 229, 255, 0.8);
	box-shadow: 8px 8px 68px rgba(0, 85, 255, 0.88), 0 0 39px rgba(5, 229, 255, 0.8);*/
	-webkit-box-shadow: 0px 0px 40px rgba(255, 94, 44, 1), 0px 0px 40px rgba(255, 94, 44, 1);
	box-shadow: 0px 0px 40px rgba(255, 94, 44, 1), 0px 0px 40px rgba(255, 94, 44, 1);
	width: 100%;
	height: 100%;
	opacity: 0;
	will-change: opacity;
    z-index: 1;
}
.item_focus.ui-breathLight-element::before {
	-webkit-animation: ui-breathLight 1200ms cubic-bezier(0.33, 0, 0.67, 1) infinite alternate;
	animation: ui-breathLight 1200ms cubic-bezier(0.33, 0, 0.67, 1) infinite alternate;
}
 @-webkit-keyframes ui-breathLight {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0.1;
}
}
 @keyframes ui-breathLight {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0.1;
}
}
.item_focus .txt {
	color:#ffffff;
}
	/* 抖动 */
.w-listAll .item_shake {
	-webkit-animation:0.25s ease;
	animation:0.25s ease;
	-webkit-animation-name:shake;
	-moz-animation-name:shake;
	-ms-animation-name:shake;
	animation-name:shake;
}
@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0) scale(1.07) ;}
    10%,30%,90%{-webkit-transform:translateX(-10px) scale(1.07) ;}
    50%,70%{-webkit-transform:translateX(10px) scale(1.07) ;}
}
@keyframes shake{
    0%,100%{transform:translateX(0) scale(1.07) ;}
    10%,30%,90%{transform:translateX(-10px) scale(1.07) ;}
    50%,70%{transform:translateX(10px) scale(1.07) ;}
}
/*@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0) scale(1.07) ;}
    20%,30%,90%{-webkit-transform:translateX(-10px) scale(1.07) ;}
    50%,70%{-webkit-transform:translateX(10px) scale(1.07) ;}
}
@keyframes shake{
    0%,100%{transform:translateX(0) scale(1.07) ;}
    20%,40%{transform:translateX(-10px) scale(1.07) ;}
    60%,80%{transform:translateX(10px) scale(1.07) ;}
}*/
/*@-webkit-keyframes shake{
    0%,100%{-webkit-transform:translateX(0) scale(1.07) ;}
    10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px) scale(1.07) ;}
    20%,40%,60%,80%{-webkit-transform:translateX(10px) scale(1.07) ;}
}
@keyframes shake{
    0%,100%{transform:translateX(0) scale(1.07) ;}
    10%,30%,50%,70%,90%{transform:translateX(-10px) scale(1.07) ;}
    20%,40%,60%,80%{transform:translateX(10px) scale(1.07);}
}*/
/* 弹入 */
.a-bouncein{-webkit-animation:0.5s ease-out backwards;-moz-animation:0.5s ease-out backwards;-ms-animation:0.5s ease-out backwards;animation:0.5s ease-out backwards;-webkit-animation-name:bouncein;-moz-animation-name:bouncein;-ms-animation-name:bouncein;animation-name:bouncein;}
@-webkit-keyframes bouncein{
    0%{opacity:0;-webkit-transform:scale(0.3);}
    50%{opacity:1;-webkit-transform:scale(1.05);}
    70%{-webkit-transform:scale(0.9);}
    100%{-webkit-transform:scale(1);}
}
@keyframes bouncein{
    0%{opacity:0;transform:scale(0.3);}
    50%{opacity:1;transform:scale(1.05);}
    70%{transform:scale(0.9);}
    100%{transform:scale(1);}
}
/* 弹入-从上 */
.a-bounceinT{
	-webkit-animation:0.5s ease-out backwards;-moz-animation:0.5s ease-out backwards;-ms-animation:0.5s ease-out backwards;animation:0.5s ease-out backwards;-webkit-animation-name:bounceinT;-moz-animation-name:bounceinT;-ms-animation-name:bounceinT;animation-name:bounceinT;
}
@-webkit-keyframes bounceinT{
    0%{opacity:0;-webkit-transform:translateY(-100px);}
    60%{opacity:1;-webkit-transform:translateY(30px);}
    80%{-webkit-transform:translateY(-10px);}
    100%{-webkit-transform:translateY(0);}
}
@keyframes bounceinT{
    0%{opacity:0;transform:translateY(-100px);}
    60%{opacity:1;transform:translateY(30px);}
    80%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
/* 弹入-从下 */
.a-bounceinB{-webkit-animation:0.5s ease-out backwards;-moz-animation:0.5s ease-out backwards;-ms-animation:0.5s ease-out backwards;animation:0.5s ease-out backwards;-webkit-animation-name:bounceinB;-moz-animation-name:bounceinB;-ms-animation-name:bounceinB;animation-name:bounceinB;}
@-webkit-keyframes bounceinB{
    0%{opacity:0;-webkit-transform:translateY(100px);}
    60%{opacity:1;-webkit-transform:translateY(-30px);}
    80%{-webkit-transform:translateY(10px);}
    100%{-webkit-transform:translateY(0);}
}
@keyframes bounceinB{
    0%{opacity:0;transform:translateY(100px);}
    60%{opacity:1;transform:translateY(-30px);}
    80%{transform:translateY(10px);}
    100%{transform:translateY(0);}
}
/* 弹入-从右 */
.a-bounceinR{-webkit-animation:0.5s ease-out backwards;-moz-animation:0.5s ease-out backwards;-ms-animation:0.5s ease-out backwards;animation:0.5s ease-out backwards;-webkit-animation-name:bounceinR;-moz-animation-name:bounceinR;-ms-animation-name:bounceinR;animation-name:bounceinR;}
@-webkit-keyframes bounceinR{
    0%{opacity:0;-webkit-transform:translateX(100px);}
    60%{opacity:1;-webkit-transform:translateX(-30px);}
    80%{-webkit-transform:translateX(10px);}
    100%{-webkit-transform:translateX(0);}
}
@keyframes bounceinR{
    0%{opacity:0;transform:translateX(100px);}
    60%{opacity:1;transform:translateX(-30px);}
    80%{transform:translateX(10px);}
    100%{transform:translateX(0);}
}
/* 弹出-向上 */
.a-bounceoutT{-webkit-animation:0.5s ease-in forwards;-moz-animation:0.5s ease-in forwards;-ms-animation:0.5s ease-in forwards;animation:0.5s ease-in forwards;-webkit-animation-name:bounceoutT;-moz-animation-name:bounceoutT;-ms-animation-name:bounceoutT;animation-name:bounceoutT;}
@-webkit-keyframes bounceoutT{
    0%{-webkit-transform:translateY(0);}
    20%{opacity:1;-webkit-transform:translateY(20px);}
    100%{opacity:0;-webkit-transform:translateY(-100px);}
}
@keyframes bounceoutT{
    0%{transform:translateY(0);}
    20%{opacity:1;transform:translateY(20px);}
    100%{opacity:0;transform:translateY(-100px);}
}
/* 弹出-向下 */
.a-bounceoutB{-webkit-animation:0.5s ease-in forwards;-moz-animation:0.5s ease-in forwards;-ms-animation:0.5s ease-in forwards;animation:0.5s ease-in forwards;-webkit-animation-name:bounceoutB;-moz-animation-name:bounceoutB;-ms-animation-name:bounceoutB;animation-name:bounceoutB;}
@-webkit-keyframes bounceoutB{
    0%{-webkit-transform:translateY(0);}
    20%{opacity:1;-webkit-transform:translateY(-20px);}
    100%{opacity:0;-webkit-transform:translateY(100px);}
}
@keyframes bounceoutB{
    0%{transform:translateY(0);}
    20%{opacity:1;transform:translateY(-20px);}
    100%{opacity:0;transform:translateY(100px);}
}
/* 弹出-向右 */
.a-bounceoutR{-webkit-animation:0.5s ease-in forwards;-moz-animation:0.5s ease-in forwards;-ms-animation:0.5s ease-in forwards;animation:0.5s ease-in forwards;-webkit-animation-name:bounceoutR;-moz-animation-name:bounceoutR;-ms-animation-name:bounceoutR;animation-name:bounceoutR;}
@-webkit-keyframes bounceoutR{
    0%{-webkit-transform:translateX(0);}
    20%{opacity:1;-webkit-transform:translateX(-20px);}
    100%{opacity:0;-webkit-transform:translateX(100px);}
}
@keyframes bounceoutR{
    0%{transform:translateX(0);}
    20%{opacity:1;transform:translateX(-20px);}
    100%{opacity:0;transform:translateX(100px);}
}
/* 淡入 */
.a-fadein{-webkit-animation:1s ease-out backwards;-moz-animation:1s ease-out backwards;-ms-animation:1s ease-out backwards;animation:1s ease-out backwards;-webkit-animation-name:fadein;-moz-animation-name:fadein;-ms-animation-name:fadein;animation-name:fadein;}
@-webkit-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-moz-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@-ms-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
/* E= animate */
